<template>
  <div class="toolBar">
    <el-select v-model="query.status" placeholder="请选择状态" class="filter-item" style="width: 90px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="query.type" placeholder="请选择">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
    <!-- 搜索 -->
    <el-input
      v-model="query.name"
      clearable
      placeholder="输入名称"
      style="width: 200px"
      class="filter-item"
    />
    <!-- <el-date-picker v-model="query.createTime" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
						<el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item"
							style="width: 90px">
							<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name"
								:value="item.key" />
    </el-select>-->

    <el-button class="filter-item" type="success" @click="onSearch">搜索</el-button>
    <el-button class="filter-item" type="warning" @click="onReset">重置</el-button>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      query: {
        name: '',
        type: '',
        status: 0,
        currentPage: 1,
        pageSize: 10
      },
      options: [{
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '正常'
        }, {
          value: 2,
          label: '删除'
        }],
        categoryOptions: [{
          value: '',
          label: '默认'
        },{
          value: '1',
          label: '药材'
        }, {
          value: '2',
          label: '方剂'
        }
      ]
    }
  },
  methods: {
    onSearch() {
      this.$emit('onSearch', this.query)
    },
    onReset() {
      this.query = {
        name: '',
        status: 0,
        currentPage: 1,
        pageSize: 10
      }

      this.onSearch()
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.toolBar > button, .toolBar > div {
  margin: 0 5px;
}
</style>